﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #myDiv {
            height: 800px;
        }

        #myDiv .img {
            display: inline-block;
            width: 100px;
            margin: 2px;
            padding: 0 0 5px 0px;
        }

        #myDiv .img img {
            cursor: pointer;
        }

        #myDiv .img div {
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-left: 5px;
        }

        #myDiv .img.gtfive {
            background-color: rgba(0, 0, 255, 0.4);
        }
    </style>
    <script src="config.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
            $("#Submit").click(function(e){
                var acvs1 = $('#input1').val()
                var acvs2 = $('#input2').val()
                var serverIP = caijingdaxueip;                                    //要访问的Ip
                if (acvs1&&acvs2){

                    $.ajax({
                        url: serverIP + "/acvsAcvsFace?acvs1=" + acvs1 + "&acvs2=" + acvs2,
                        type: 'GET',
                         success:function(data){
                            loadJSON(JSON.parse(data))
                         }
                    })
                }
         });

            //生成结果
            function loadJSON(arcs) {
                for (var i = 0; i < arcs.length; i++) {
                    if(arcs[i].detectFacev2 != null){

                        if(arcs[i]["detectFacev2"] == 1){
                            var detectFacev2 = '<div style="background:green;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        }
                        else {
                            var detectFacev2 = '<div style="background:#888\t;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        }
                    }
                else {
                    var detectFacev2 = '<br>';
                }

                if(arcs[i]["x"] != null&&Math.abs(arcs[i].x) <= 40&&Math.abs(arcs[i]["y"]) <= 40&&Math.abs(arcs[i]["z"]) <= 40){
                    var x = '<div style="background:green;">x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>';
                    var y = '<div style="background:green;">y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>';
                    var z = '<div style="background:green;">z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>';
                }
                else {
                    var x = (arcs[i]["x"] != null) ? '<div>x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>' : '<br>';
                    var y = (arcs[i]["y"] != null) ? '<div>y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>' : '<br>';
                    var z = (arcs[i]["z"] != null) ? '<div>z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>' : '<br>';
                }

                var detectFace = (arcs[i]["detectFace"] != null) ? '<div title="' + arcs[i]["detectFace"] + '">角度:' + arcs[i]["detectFace"] + '</div>' : '<br>';

                if(arcs[i]["detectCount"] != null&&arcs[i]["detectCount"] > 1){
                    var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:red;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                }
                else {
                    var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:green;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                }

                var faceid = (arcs[i]["face_image_id"] != null) ? '<div>' + arcs[i]["face_image_id"] + '</div>' : '<br>';


                  var $html = $(" <div class='img'>\
                            <img class = 'caijingrenxiang' height='100' width='100' data-id = '" + arcs[i]["face_image_id"] + "' data-original='" + arcs[i]["face_image_uri"] + "'> \
                            "+ faceid +"\
                            "+ faceCount + "\
                            "+ detectFacev2 +"\
                            "+ detectFace +"\
                            "+ x +"\
                            "+ y +"\
                            "+ z +"\
                            </div>"
                            )

                  $("#myDiv").append($html)
                }
                $("img").lazyload();
                    }
       })

    </script>
</head>
<body style='background:#777'>
<div>
    <h2>两个档案的相同face</h2>
    acvs1: <input type="text" name="acvs1" value="" size="20" id="input1" >
    acvs2: <input type="text" name="acvs2" value="" size="20" id="input2" >
    <input type="submit" value="Submit" id="Submit">

</div>


<div id="myDiv"></div>
</body>
</html>